<script setup>
import { reactive, ref } from "vue";
import { Search, More } from "@element-plus/icons-vue";
import { getProductList } from "@/api/product";
import { formatTime } from "@/utils/format";

const productDetail = ref(null);

// 请求参数
const params = reactive({
  current: 1,
  size: 10,
  keyword: "",
});
// 加载
const loading = ref(false);
// 存储数据
const list = ref([]);
// 存储条数
const total = ref(0);

// 获取列表
const getList = async () => {
  loading.value = true;
  const res = await getProductList(params);
  list.value = res.data.data.data;
  total.value = res.data.data.total;
  loading.value = false;
};
getList();

// 搜索
const onSearch = () => {
  params.current = 1;
  getList();
};
// 重置
const restore = () => {
  params.keyword = "";
  getList();
};

// 页数和条数变化
const handleSizeChange = (val) => {
  params.size = val;
  getList();
};
const handleCurrentChange = (val) => {
  params.current = val;
  getList();
};
</script>

<template>
  <Card title="农产品信息">
    <el-form inline style="margin-left: 20px">
      <el-form-item style="width: 300px">
        <el-input
          :prefix-icon="Search"
          v-model="params.keyword"
          clearable
          class="w-50"
          placeholder="农产品名称"
          @keyup.enter="onSearch"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="restore">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="list"
      style="width: 100%"
      v-loading="loading"
      :default-sort="[
        { prop: 'createTime', order: 'descending' },
        { prop: 'price', order: 'descending' },
      ]"
    >
      <el-table-column type="index" label="序列" width="100" align="center" />
      <el-table-column prop="productName" label="产品名称" align="center" />
      <el-table-column prop="price" label="单价" align="center" sortable />
      <el-table-column prop="stock" label="库存" align="center" />
      <el-table-column prop="salesVolume" label="销量" align="center" />
      <el-table-column
        prop="status"
        label="状态"
        align="center"
        :filters="[
          { text: '待审核', value: 0 },
          { text: '不通过', value: 1 },
          { text: '上架', value: 2 },
          { text: '下架', value: 3 },
        ]"
        :filter-method="(value, row) => row.status === value"
        filter-placement="bottom-end"
      >
        <template #default="{ row }">
          <el-tag v-if="row.status === 0" type="primary">待审核</el-tag>
          <el-tag v-else-if="row.status === 1" type="warning">不通过</el-tag>
          <el-tag v-else-if="row.status === 2" type="success">上架</el-tag>
          <el-tag v-else-if="row.status === 3" type="danger">上架</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="上传时间"
        align="center"
        sortable
      >
        <template #default="{ row }">
          {{ formatTime(row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template #default="{ row }">
          <el-button
            :icon="More"
            circle
            plain
            type="primary"
            @click="productDetail.handleOpen(row)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="params.current"
      v-model:page-size="params.size"
      :page-sizes="[2, 3, 4, 5, 10]"
      background
      layout="jumper,total, sizes, prev, pager, next"
      :total="Number(total)"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 50px; justify-content: flex-end"
    />
  </Card>
  <ProductDetail ref="productDetail" @success="getList()" />
</template>

<style lang="scss" scoped></style>
